<template>
    <view>
        <view class="wrap">
            <cu-custom bgColor="bg-gradual-blue" :isBack="true">
                <block slot="backText">返回</block>
                <block slot="content">我的定期任务</block>
            </cu-custom>

            <view class="goods-header-wrap">
                <scroll-view scroll-x="true" class="tab-scroll" :scroll-left="scrollLeft" show-scrollbar="false">
                    <view class="scroll-content">
                        <view v-if="count.task1>0" class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' : 1 == goodsNav}" @click="setNav(1)">
                            <view v-if="count.task1>0" class="cu-tag badge">{{count.task1}}</view>当日
                        </view>
                        <view v-if="count.task2>0" class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' : 2 == goodsNav}" @click="setNav(2)">
                            <view v-if="count.task2>0" class="cu-tag badge">{{count.task2}}</view>本周
                        </view>
                        <view v-if="count.task3>0" class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' : 3 == goodsNav}" @click="setNav(3)">
                            <view v-if="count.task3>0" class="cu-tag badge">{{count.task3}}</view>本月
                        </view>
                        <view v-if="count.task5>0" class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' : 5 == goodsNav}" @click="setNav(5)">
                            <view v-if="count.task5>0" class="cu-tag badge">{{count.task5}}</view>季度
                        </view>
                        <view v-if="count.task6>0" class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' :6 == goodsNav}" @click="setNav(6)">
                            <view v-if="count.task6>0" class="cu-tag badge">{{count.task6}}</view>半年
                        </view>
                        <view v-if="count.task7>0" class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' :7 == goodsNav}" @click="setNav(7)">
                            <view v-if="count.task7>0" class="cu-tag badge">{{count.task7}}</view>周期
                        </view>
                        <view v-if="count.task8>0" class="goods-header-item goods-header-item-action" :class="{'goods-header-item-active' :8 == goodsNav}" @click="setNav(8)">
                            <view v-if="count.task8>0" class="cu-tag badge">{{count.task8}}</view>每月固定
                        </view>
                    </view>
                </scroll-view>
            </view>

            <!-- 头部结束 -->
            <view slot="top" class="search">
                <u-search placeholder="请输入计划名称" v-model="getData.KeyWords" @custom='search()' @search='search()'></u-search>
            </view>
            <view v-for="(item, index) in dataList" class="goods-item-wrap" :class="item.isNowTask==1?'goods-item-wrap-now':''">
                <view class="goods-content-wrap">
                    <view class="goods-name">
                        <view class="goods-name-title">{{item.JobName}}</view>
                    </view>
                    <view class="goods-stock-wrap">
                        <view class="goods-stock">已巡/未巡</view>
                        <view class="goods-stock-isok">{{item.signed}}</view>
                        <view class="goods-stock-middle">/</view>
                        <view class="goods-stock-notok">{{item.notSigned}}</view>
                    </view>
                    <!-- 新增进度条 -->
                   <view class="progress-bar-wrap">
                       <view class="goods-stock">进度</view>
                       <view class="progress-bar-content">
                           <view class="progress-bar" :style="{ width: getProgressPercentage(item) + '%' }"></view>
                           <view class="progress-percentage">{{ getProgressPercentage(item) }}%</view>
                       </view>
                   </view>
                    <view class="goods-stock-wrap">
                        <view class="goods-stock">人员</view>
                        <view class="goods-stock">{{item.qrcodeUserName}}</view>
                    </view>
                    <view class="goods-stock-wrap" style="border-bottom: 1px solid #F3F4F8;">
                        <view class="goods-stock">周期</view>
                        <view class="goods-stock-time">{{item.qrcodeJobTask}}</view>
                    </view>
                    <view v-if="item.IsTeam==1" class="goods-price1">团队模式</view>
                    <view v-if="item.IsTeam!=1" class="goods-price2">个人模式</view>
                    <view v-if="item.isNowTask==1" class="publish-goods-btn" @click="goScan(item.Id,item.JobName,item.isNFC,item.isImages,item.isVideo,item.IsDeviceJob)">去执行</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import request from '@/common/request.js';
import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";	
export default {
    components: {
        unifab
    },
    data() {
        return {
            scrollLeft: 0,
            count:{
                task1:0,
                task2:0,
                task3:0,
                task5:0,
                task6:0,
                task8:0,
            },
            themeColor: '#0079FE',
            authMessage:'',
            activeColor: '#0081ff',
            getData:{
                task:1,
                KeyWords:''
            },
            dataList:[],
            current: 0,
            swiperCurrent: 0,
            tabsHeight: 0,
            dx: 0,
            goodsNav: 1,
            showDaiBan:0,
            showWorkOrder:0
        };
    },
    mounted() {
        console.log('mounted')
    },
    computed: {
    },
    onLoad() {
        let that=this
        //that.getTaskList();
        that.GetMyTaskListCount();
    },
    onShow(){
    },
    methods: {
        setNav(goodsNav) {
            console.log('setNav')
            let that=this
            that.goodsNav=goodsNav
            that.getData.task = goodsNav
            that.getTaskList();
        },
        goScan(id,jobname,isnfc,isImages,isVideo,isDeviceJob){
            let that=this
            uni.setStorage({
                key:'JobId',
                data:{id:id,jobname:jobname,isnfc:isnfc,isImages:isImages,isVideo:isVideo,isDeviceJob:isDeviceJob},
                success() {
                    setTimeout(() => {
                        uni.reLaunch({
                            url: '/pages/index/tabbar?PageCur=qrcode'
                        });
                    }, 100)
                },
                fail() {
                    uni.showToast({ title: '网络异常,请重试', icon: 'none' });
                }
            })
        },
        // 搜索框
        search(e){
            let that=this
            that.getData.KeyWords=e
            this.getTaskList();
        },
        getTaskList(){
            let that=this
            uni.showLoading({
                title: '加载中...'
            })
            let opts = {
                url: 'api/GetMyTaskList',
                method: 'get'
            };
            request.httpTokenRequest(opts,that.getData).then(res => {
                uni.hideLoading();
                if(res.data.code == 1){
                    that.dataList=res.data.data
                }
                else{
                    uni.showToast({ title: res.data.msg, icon: 'none' });
                }
            });
        },
        GetMyTaskListCount(){
            let that=this
            uni.showLoading({
                title: '加载中...'
            })
            let opts = {
                url: 'api/GetMyTaskListCount',
                method: 'get'
            };
            request.httpTokenRequest(opts,that.getData).then(res => {
                uni.hideLoading();
                if(res.data.code == 1){
                    that.count.task1=res.data.data.task1
                    that.count.task2=res.data.data.task2
                    that.count.task3=res.data.data.task3
                    that.count.task5=res.data.data.task5
                    that.count.task6=res.data.data.task6
                    that.count.task8=res.data.data.task8
                    if(res.data.data.task1>0){
                        that.goodsNav=1
                        that.getData.task = 1
                    }else if(res.data.data.task2>0){
                        that.goodsNav=2
                        that.getData.task =2
                    }else if(res.data.data.task3>0){
                        that.goodsNav=3
                        that.getData.task =3
                    }else if(res.data.data.task4>0){
                        that.goodsNav=4
                        that.getData.task =4
                    }else if(res.data.data.task5>0){
                        that.goodsNav=5
                        that.getData.task =5
                    }else if(res.data.data.task6>0){
                        that.goodsNav=6
                        that.getData.task =6
                    }else if(res.data.data.task8>0){
                        that.goodsNav=8
                        that.getData.task =8
                    }
                    that.getTaskList();
                }
                else{
                    uni.showToast({ title: res.data.msg, icon: 'none' });
                }
            });
        },
        getProgressPercentage(item) {
            const total = parseInt(item.signed) + parseInt(item.notSigned);
            if (total === 0) {
                return 0;
            }
            return Math.round((parseInt(item.signed) / total) * 100);
        }
    }
};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
    height: 100%;
    background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
    .cu-tag.badge{
        top:-10rpx !important;
        right:30rpx !important;

    }
    .goods-item-wrap-now{
        //border:2px solid #00B52A;
    }
    .goods-item-wrap {
        border-radius: 8rpx;
        background: #FFFFFF;
        display: flex;
        padding: 24rpx;
        margin: 12rpx;
        //width:100%;
        .goods-content-wrap{
            width: 100%;
        }
        .goods-name {
            width: 100%;
            font-size: 32rpx;
            font-weight: bold;
            display: flex;
            position: relative;
            border-bottom: 1px solid #F3F4F8;
            padding-bottom: 20rpx;
        }
        .goods-name-title{
            display: block;
            float: left;
        }
        .goods-name-type{
            display: block;
            float:right;
            color: #3B69FD;
            margin-right: 20rpx;
        }
        .goods-stock-wrap {
            display: flex;
            color: #969696;
            font-size: 24rpx;
            margin-top: 20rpx;
        }

        .goods-stock {
            margin-right: 40rpx;
            font-size: 28rpx;
            color: #636571;
            line-height: 32rpx;
        }
        .goods-stock-isok{
            margin-right: 10rpx;
            font-size: 38rpx;
            color: #00B52A;
            line-height: 32rpx;
            font-weight: 700;
        }
        .goods-stock-middle{
            margin-right: 10rpx;
            font-size: 38rpx;
            color: #636571;
            line-height: 32rpx;
            font-weight: 700;
        }
        .goods-stock-notok{
            margin-right: 40rpx;
            font-size: 38rpx;
            color: #F53F3E;
            line-height: 32rpx;
            font-weight: 700;
        }
        .goods-stock-time {
            margin-right: 24rpx;
            font-size: 28rpx;
            color: #e7612e;
            padding-bottom: 20rpx;
        }
        .goods-shangxiaxian {
            font-size:24rpx;
            color: #3F71C4;
            margin-top: 14rpx;
        }

        .goods-price1 {
            font-size:26rpx;
            color: #3B69FD;
            margin-top: 20rpx;
            font-weight:500;
            width: 160rpx;
            display: block;
            float:left;
            background-color: #D0D9F7;
            border-radius: 4rpx;
            text-align: center;
            height: 54rpx;
            line-height: 54rpx;
        }
        .goods-price2 {
            font-size:26rpx;
            color: #15C9CA;
            margin-top: 20rpx;
            font-weight:500;
            width: 160rpx;
            display: block;
            float:left;
            background-color: #C8ECEC;
            border-radius: 4rpx;
            text-align: center;
            height: 54rpx;
            line-height: 54rpx;
        }
        .goods-option-item {
            padding: 8rpx 16rpx;
            border-radius: 36rpx;
            font-size: 24rpx;
            margin-top: 24rpx;
        }
    }

   .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
    }
   .swiper-box {
        flex: 1;
    }
   .swiper-item {
        height: 100%;
    }

    .goods-option-item {
        padding: 8rpx 16rpx;
        border-radius: 36rpx;
        font-size: 24rpx;
        margin-top: 24rpx;
    }

    .goods-option-item:not(:last-child) {
        margin-right: 24rpx;
    }

    .goods-option-item-action {
        background: #f1f0fe;
        color: #6991ce;
    }

    .goods-item-wrap {
        margin-top: 24rpx;
    }

    .goods-header-wrap {
        height: 100rpx;
        background: #fff;
        padding: 0 20rpx;
       .tab-scroll {
            height: 100%;
            white-space: nowrap;
           .scroll-content {
                display: inline-flex;
                height: 100%;
                align-items: center;
            }
        }
    }

    .goods-header-item {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 60rpx;
        padding: 0 38rpx;
        margin: 0 12rpx;
        font-size: 26rpx;
        color: #666;
        border-radius: 30rpx;
        background: #f5f5f5;
        transition: all 0.3s;

        &.goods-header-item-active {
            background: #e8f2ff;
            color: #0079FE;
            //font-weight: 500;
            &::after {
                display: none; /* 去掉原来的下划线 */
            }
        }

        .cu-tag.badge {
            position: absolute;
            right: -10rpx;
            top: -10rpx;
            min-width: 32rpx;
            height: 32rpx;
            padding: 0 6rpx;
            font-size: 20rpx;
            line-height: 32rpx;
            margin-right: -30rpx;
        }
    }

    .goods-header-item{
        width:33%;
        text-align: center;
    }
    .goods-header-item-active{
        font-size: 28rpx;
        font-color: #333333;
        font-weight: bold;
        position: relative;
    }
    .goods-header-item-active::after{
        position: absolute;
        left: 50%;
        right: 0;
        background: #4372fe;
        height: 8rpx;
        content: "";
        bottom: -12rpx;
        width: 60rpx;
        margin-left: -30rpx;
        border-radius: 200rpx;
    }
    .goods-header-item-action {
        // font-size: 32rpx;
        // font-color: #333333;
        // font-weight: bold;
        position: relative;
    }

    .goods-header-item-action::after {
        // position: absolute;
        // left: 0;
        // right: 0;
        // background: #4372fe;
        // height: 8rpx;
        // content: "";
        // bottom: -12rpx;
    }
   .extraPosition{
        position: absolute;
        right: -5rpx;
        top: -10rpx;
        font-size: 20rpx;
        padding: 0rpx 10rpx;
        height: 28rpx;
        color: #ffffff;
        background-color: #dd514c;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

   .publish-goods-btn {
        width:160rpx;
        background: #e7612e;
        color: #FFFFFF;
        height: 54rpx;
        line-height: 54rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 82rpx;
        float:right;
        margin-right: 20rpx;
        margin-top: 20rpx;
    }

   .search{
        width: 100%;
        height: 100rpx;
        padding: 20rpx 2% 20rpx 2%;
        background-color: #fff;
        // display: flex;
        // align-items: center;
    }
    /* 新增进度条样式 */
   .progress-bar-wrap {
       width: 100%;
       //background-color: #f3f3f3;
       border-radius: 4rpx;
       margin-top: 20rpx;
       position: relative;
       height: 40rpx;
       border-radius: 20rpx;
       display: flex;
       align-items: center;
   }
   
   .goods-stock {
       margin-right: 20rpx; // 可根据需要调整间距
       min-width: 60rpx; // 可根据需要调整最小宽度
   }
   
   .progress-bar-content {
        flex: 1;
        position: relative;
	    background-color: #f3f3f3;
	    border-radius: 20rpx;
   }
   
   .progress-bar {
       height: 40rpx;
       background-color: #00B52A;
       border-radius: 20rpx;
   }
   
   .progress-percentage {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       font-size: 28rpx;
       line-height: 40rpx;
       color: #333;
   }
</style>